html {
    scroll-behavior: smooth
}

h1,h2,h3,h4,h5,h6 {
    padding: 0;
    margin: 0;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif
}

a:link {
    color: #0f66a5;
    text-decoration: none;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif
}

a:visited {
    color: #0f66a5;
    text-decoration: none;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif
}

a:hover {
    color: #0a4c7b;
    text-decoration: none;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif
}

a:active {
    color: #0f66a5;
    text-decoration: none;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif
}

body {
    margin: 0 0;
    color: #000;
    font-size: 16px;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif
}

* {
    box-sizing: border-box
}

:focus {
    outline: 0
}

.btn,a.btn {
    display: inline-block;
    background-color: #fff;
    padding: 10px 20px 10px 20px;
    border-radius: 3px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    border: none;
    cursor: pointer
}

.btn--green,a.btn--green {
    background-color: green;
    color: #fff
}

.btn--blue,a.btn--blue {
    background-color: #0f66a5;
    color: #fff
}

.body-main {
    margin-left: 0;
    margin-top: 0
}

.container {
    width: 100%;
    background-color: #fff;
    padding: 0 20px
}

.content {
    width: 100%;
    max-width: 1180px;
    margin: auto
}

.content-title {
    font-size: 32px
}

.content-description {
    font-size: 16px;
    margin-bottom: 30px
}

.header-main {
    text-align: center;
    width: 100%;
    height: 125px
}

.flex-container {
    display: flex;
    justify-content: space-between
}

.logo {
    flex: 1
}

.logo img {
    transform: translateY(-40px)
}

.header-menu {
    flex: 3;
    font-size: 1.75em;
    color: #fff;
    padding-top: 45px;
    text-align: right
}

.header-menu-mob {
    display: none;
    cursor: pointer
}

#header-menu-item:link {
    color: #000;
    text-decoration: none;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif
}

#header-menu-item:visited {
    color: #000;
    text-decoration: none;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif
}

#header-menu-item:hover {
    color: #0f66a5;
    text-decoration: none;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif
}

#header-menu-item:active {
    color: #0f66a5;
    text-decoration: none;
    font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif
}

#header-menu-item {
    padding-right: 25px
}

.div-header-side-right-cta {
    padding-top: 28px
}

.header-phone-cta {
    font-size: 400%
}

.slide-show {
    background: url(/web/20220307215043im_/https://www.sklenarstvitolar.cz/hp-img.jpg) center 65% no-repeat;
    background-size: cover;
    width: 100%;
    height: 600px;
    text-align: left
}

.annotation-box {
    position: relative;
    top: 250px;
    width: 100%;
    max-width: 500px;
    background-color: rgba(255,255,255,.8);
    padding: 30px 30px
}

.annotation-box h1 {
    padding: 0;
    margin: 0 0 30px;
    line-height: 1em
}

.annotation-box p {
    padding: 0;
    margin: 0 0 30px;
    line-height: 1em;
    line-height: 1.4em
}

.services {
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px
}

.tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.tile {
    width: 30%;
    margin: 0 0 30px
}

.tile-tittle {
    font-size: 20px;
    margin: 0 0 10px
}

.tile-tittle a {
    color: #000
}

.tile-description {
    font-size: 16px;
    margin: 0 0 22px
}

.tile-img {
    display: block;
    height: 250px;
    background-color: #d3d3d3;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 105%;
    margin-bottom: 25px
}

#kitchen {
    background-position: 60% center;
    background-size: 230%
}

#cutting {
    background-position: center;
    background-size: 155%
}

i:nth-child(1) {
    color: #000;
    font-size: 500%;
    transform: translateY(0)
}

.btn-services {
    margin: 60px 0 0;
    text-align: center
}

.btn-services a {
    text-align: center;
    display: inline-block;
    background-color: #0f66a5;
    padding: 6px 15px 6px 15px;
    border-radius: 3px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 24px
}

.contacts {
    background-color: #f0f8ff;
    padding-top: 60px;
    padding-bottom: 60px
}

.tile-contacts,.tile-form {
    flex: 1;
    width: 46%;
    text-align: left
}

.tile-contacts h3,.tile-form h3 {
    font-size: 28px;
    margin-bottom: 30px
}

.tile-contacts p {
    margin-bottom: 30px;
    line-height: 34px
}

.tile-contacts p i {
    font-size: 1.1em;
    margin-right: 10px
}

.tile-contacts table {
    margin-bottom: 30px;
    font-size: 21px
}

.tile-contacts th {
    width: 100px
}

.tile-contacts a {
    font-size: 22px
}

.tile-contacts p {
    margin-bottom: 30px;
    font-size: 21px
}

#form-input-fld {
    display: none
}

.form-fields {
    margin-bottom: 10px
}

label {
    padding-top: 5px;
    display: inline-block;
    width: 150px;
    vertical-align: top
}

.text-area,.text-input {
    display: inline-block;
    width: calc(100% - 160px);
    border: 1px solid rgb(217 217 220);
    padding: 5px 10px
}

.text-area:focus,.text-input:focus {
    outline: 0;
    border-color: #000
}

.text-area {
    height: 200px;
    resize: none
}

.btn-container {
    display: inline-block;
    width: calc(100% - 160px);
    text-align: center
}

.map {
    padding: 0
}

.map iframe {
    width: 100%;
    height: 520px;
    border: none;
    display: block
}

.footer {
    background-color: #2e3035
}

.footer-box {
    padding: 60px 0;
    max-width: none
}

.footer-box-item {
    flex: 1;
    color: #fff;
    text-align: center;
    width: 30%;
    z-index: 10
}

a.p-footer-box {
    color: #fff!important;
    text-decoration: underline
}

@media (max-width: 768px) {
    .tile {
        width:46%
    }
}

@media (max-width: 690px) {
    .tile-contacts h3,.tile-form h3 {
        font-size:22px
    }

    .tile-contacts p {
        font-size: 16px
    }

    .tile-contacts p i {
        font-size: 1em;
        margin-right: 5px
    }

    .tile-contacts table {
        margin-bottom: 30px;
        font-size: 21px
    }

    .tile-contacts a {
        font-size: 22px
    }

    .tile-contacts a {
        font-size: 16px
    }

    .tile-contacts table {
        font-size: 16px
    }

    label {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        width: 100%
    }

    .text-area,.text-input {
        display: flex;
        flex-wrap: wrap;
        justify-content: unset;
        text-align: center;
        width: 100%
    }

    .form-fields {
        width: 100%
    }

    .btn-container {
        width: 100%
    }
}

@media (max-width: 670px) {
    .header-menu {
        display:none
    }

    .logo {
        flex: 3
    }
}

@media (max-width: 510px) {
    .tile-contacts h3,.tile-form h3 {
        font-size:16px
    }

    .tile-contacts p {
        font-size: 14px
    }

    .tile-contacts a {
        font-size: 14px
    }

    .tile-contacts table {
        font-size: 14px
    }

    label {
        font-size: 10px
    }

    .text-area {
        height: 150px
    }

    .btn-container {
        width: 100%
    }
}

@media (max-width: 490px) {
    .footer-box-item h4 {
        font-size:12px
    }

    .footer-box-item p,a {
        font-size: 10px
    }
}

@media (max-width: 430px) {
    .slide-show {
        height:400px;
        background-image: url(/web/20220307215043im_/https://www.sklenarstvitolar.cz/hp-img-mobile.jpg)
    }

    .annotation-box {
        top: 50px
    }

    .tiles {
        justify-content: center
    }

    .tile {
        text-align: center;
        width: 80%
    }

    .flex-container {
        display: flex;
        flex-wrap: wrap
    }

    .tile-contacts,.tile-form {
        width: 80%;
        flex: unset;
        text-align: center;
        margin: auto
    }

    .tile-contacts table {
        margin: auto;
        margin-bottom: 30px
    }
}

@media (max-width: 390px) {
    .logo {
        margin-top:25px
    }

    .logo img {
        width: 140px
    }

    .btn,a.btn {
        display: inline-block;
        background-color: rgb(68,137,216,.7);
        padding: 6px 15px 6px 15px;
        border-radius: 3px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        border: none;
        cursor: pointer;
        font-size: 12px
    }

    .annotation-box {
        top: 125px;
        max-width: 290px;
        padding: 15px 15px
    }

    .annotation-box h1 {
        font-size: 16px
    }

    .annotation-box p {
        font-size: 14px;
        margin-bottom: 15px
    }

    .tile {
        margin-bottom: 18px
    }

    .tile-img {
        height: 150px
    }

    .tile-tittle {
        font-size: 16px;
        margin: 0 0 8px
    }

    .tile-tittle-a {
        font-size: 16px
    }

    .tile-tittle a {
        font-size: 16px
    }

    .tile-description {
        font-size: 14px
    }

    .services {
        padding-top: 30px;
        padding-bottom: 30px
    }

    .contacts {
        padding-top: 30px;
        padding-bottom: 30px
    }

    .tile-contacts h3,.tile-form h3 {
        font-size: 14px
    }

    .tile-contacts p {
        font-size: 12px
    }

    .tile-contacts a {
        font-size: 12px
    }

    .tile-contacts table {
        font-size: 12px;
        margin-bottom: 15px
    }

    .map iframe {
        height: 320px
    }

    .footer {
        height: 130px
    }

    .footer-box {
        padding-top: 20px;
        padding-bottom: 0
    }

    .footer-box-item h4 {
        font-size: 12px
    }

    .footer-box-item p,a {
        font-size: 10px
    }

    .a-footer-box {
        display: none
    }
}